<template>
    <div class="fixed" v-if="reveal">
        <router-link to="/bookrack" tag="div" :class="icon===0 ? 'icon' : '' ">
            <i class="iconfont icon-shujiguanli"></i>
            <div>书架</div>
        </router-link>
        <router-link to="/index" tag="div" :class="icon===1 ? 'icon' : '' ">
            <i class="iconfont icon-home"></i>
            <div>首页</div>
        </router-link>
        <router-link to="/chongzhi" tag="div" :class="icon===2 ? 'icon' : '' ">
            <i class="iconfont icon-chongzhi"></i>
            <div>充值</div>
        </router-link>
        <router-link to="/my" tag="div" :class="icon===3 ? 'icon' : '' ">
            <i class="iconfont icon-yonghu"></i>
            <div>我的</div>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "bottom",
        props:['i'],
        data(){
            return{
                reveal:true,
                icon: this.i,
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/css/novel.scss";
    a:hover,a:active,a:visited,a:link,a:focus{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
        outline:none;
        background: none;
        text-decoration: none;
    }
    .fixed{
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 1000;
        height: 50px;
        border-top: 1px solid #ddd;
        background: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 12px;
        color: gray;
    }
    .container{
        margin-bottom: 60px;
    }
    .fixed>div{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .iconfont{
        font-size: 1.2rem !important;
        color: gray;
    }
    .icon {
    i {
        color: $novel-bottom;
    }
    div {
        color: $novel-bottom;
    }
    }
    @media (min-width: 768px) {
        .container,.top{
            margin: auto;
            width: 750px;
        }
    }
</style>